<template>
  <div style="height: 100%;">
    <el-row style="height: 100%;"
            class="content-item">
      <el-col :span="5"
              class="borderBox">
        <el-input v-model="collegeName"
                  placeholder="请输入学院名称"
                  size="small"
                  style="width: 192px;"></el-input>
        <el-button type="primary"
                   size="small"
                   @click="query">搜索</el-button>
        <el-table :data="tabData"
                  class="table-header-gray"
                  highlight-current-row
                  ref="singleTable"
                  @current-change="handleCurrentChange"
                  style="width: 100%;margin-top: 10px;">
          <el-table-column property="name"
                           label="学院名称">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="7"
              class="borderBox">
        <el-button type=""
                   size="small"
                   @click="add">+添加</el-button>
        <el-table :data="tabData2"
                  class="table-header-gray"
                  highlight-current-row
                  ref="singleTable2"
                  @current-change="handleCurrentChange2"
                  style="width: 100%;margin-top: 10px;">
          <el-table-column property="schoolAreaName"
                           label="校区">
          </el-table-column>
          <el-table-column property="campusAreaName"
                           label="园区">
          </el-table-column>
          <el-table-column property="numberAndUnitNumber"
                           label="楼栋">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="remove(scope.row.id)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12"
              class="borderBox">
        <el-select v-model="floorId"
                   size="small"
                   @change="floorChange"
                   placeholder="请选择楼层">
          <el-option v-for="(item, index) in floorList"
                     :key="index"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
        <el-transfer v-model="checkedRoomList"
                     @change="roomChange"
                     :titles="['源列表', '目标列表']"
                     style="margin-top: 10px;"
                     :props="{key: 'id', label: 'name'}"
                     :data="roomList"></el-transfer>
      </el-col>
    </el-row>
    <dialog-add :dialogShow="dialogShow"
                :tabData="tabData2"
                :collegeId="collegeId"
                @sure="sure"
                @handleClose="handleClose"></dialog-add>
  </div>
</template>
<script>
import {
  _getListCollegeByUser,
  _getlistBuildingByCollegeId,
  _getlistFloorByBuildingId,
  _getlistRoomByCollegeAndFloor,
  _addCollegeRoom,
  _removeCollegeRoom,
  _addBuildingToCollege,
  _deleteCollegeBuildingById
} from '@api/systemManage'
import dialogAdd from './dialog-add'
export default {
  components: {
    dialogAdd
  },
  data () {
    return {
      floorList: [],
      floorId: null,
      collegeId: null,
      roomList: [],
      checkedRoomList: [],
      dialogShow: false,
      collegeName: '',
      schoolArea: '',
      tabData: [],
      realTabData: [],
      tabData2: []
    }
  },
  methods: {
    // 搜索
    query () {
      if (this.collegeName) {
        this.tabData = this.realTabData.filter(item => {
          return item.name.includes(this.collegeName)
        })
        if (this.tabData.length) {
          this.handleCurrentChange(this.tabData[0])
          this.getlistBuildingByCollegeId(this.collegeId)
        } else {
          this.tabData2 = []
          this.floorList = []
          this.roomList = []
        }
      } else {
        this.getListCollegeByUser()
      }
    },
    // 添加
    add () {
      this.dialogShow = true
    },
    // 选中表格某一行
    handleCurrentChange (val) {
      this.$refs.singleTable.setCurrentRow(val)
      if (val) {
        this.collegeId = val.id
        this.getlistBuildingByCollegeId(val.id)
      }
    },
    handleCurrentChange2 (val) {
      this.$refs.singleTable2.setCurrentRow(val)
      if (val) {
        this.getlistFloorByBuildingId(val.buildingId)
      } else {
        this.floorList = []
        this.roomList = []
        this.checkedRoomList = []
        this.floorId = null
      }
    },
    // 关闭弹窗
    handleClose () {
      this.dialogShow = false
    },
    // 根据登陆用户查询学院列表
    getListCollegeByUser () {
      _getListCollegeByUser().then(res => {
        this.tabData = res.data
        this.realTabData = res.data
        if (res.data) this.handleCurrentChange(res.data[0])
      })
    },
    // 学院分管-根据学院id查询管辖楼栋
    getlistBuildingByCollegeId (collegeId) {
      _getlistBuildingByCollegeId(collegeId).then(res => {
        this.tabData2 = res.data
        if (res.data) this.handleCurrentChange2(res.data[0])
      })
    },
    // 根据楼栋id查询下面的楼层
    getlistFloorByBuildingId (id) {
      _getlistFloorByBuildingId(id).then(res => {
        this.floorList = res.data
        if (res.data.length) {
          this.floorId = res.data[0].id
          this.getlistRoomByCollegeAndFloor(res.data[0].id, this.collegeId)
        }
      })
    },
    // 学院分管-根据学院id和楼层id查询房间列表
    getlistRoomByCollegeAndFloor (floorId, collegeId) {
      this.roomList = []
      _getlistRoomByCollegeAndFloor(floorId, collegeId).then(res => {
        this.roomList = res.data ? res.data : []
        this.checkedRoomList = []
        this.roomList.forEach(item => {
          if (item.checkStatus) {
            this.checkedRoomList.push(item.id)
          }
        })
        console.log(this.checkedRoomList, 'this.checkedRoomList')
      })
    },
    // 楼层改变
    floorChange (val) {
      this.getlistRoomByCollegeAndFloor(val, this.collegeId)
    },
    // 房间左右移动
    roomChange (valList, direction, moveList) {
      let params = []
      valList.forEach(item => {
        this.roomList.forEach(ele => {
          if (ele.id === item) {
            params.push({
              buildingId: ele.buildingId,
              campusId: ele.campusId,
              collegeId: this.collegeId,
              floorId: ele.floorId,
              roomId: ele.id,
              schoolAreaId: ele.schoolAresId
            })
          }
        })
      })
      if (direction === 'right') {
        _addCollegeRoom(params).then(res => {
          this.$message.success('添加成功')
        })
      } else {
        _removeCollegeRoom(moveList).then(res => {
          this.$message.success('移除成功')
        })
      }
    },
    addBuildingToCollege (id) {
      _addBuildingToCollege(id).then(res => {

      })
    },
    // 移除
    remove (id) {
      this.$confirm('确定移除吗？', '提示', {
        type: 'warning'
      }).then(_ =>
        _deleteCollegeBuildingById(id).then(res => {
          this.getlistBuildingByCollegeId(this.collegeId)
          this.$message.success('移除成功')
        })
      ).catch(() =>
        this.$message.info('已取消移除')
      )
    },
    sure () {
      this.getlistBuildingByCollegeId(this.collegeId)
    }
  },
  mounted () {
    this.getListCollegeByUser()
  }
}
</script>
<style lang="less" scoped>
.borderBox {
  border: 1px solid #cccccc;
  display: block;
  padding: 10px;
  height: 100%;
  overflow: auto;
}
</style>
